<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/mui.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1190625_m3wxzcfcc89.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/config.css">
    <title>商品详情</title>
    <style>
        html,body{
            background-color: #FAFAFE;
        }
        .main{
            padding-bottom: .49rem;
        }
        .choseAddress{
            width: 100%;
            margin-top: 1px;
            background-color: #fff;
            overflow: hidden;
        }
        .choseAddress .noAddress{
            width: 100%;
            height: 1.28rem;
            font-size: .14rem;
            color: #999;
            padding: 0 .15rem;
        }
        .choseAddress .noAddress i{
            font-size: .14rem;
        }
        .choseAddress .hasAddress{
            width: 100%;
            padding: 0 .15rem;
            height: 1.28rem;
            position: relative;
            overflow: hidden;
        }
        .choseAddress .hasAddress >div{
            width: 100%;
            height: .18rem;
            margin-top: .12rem;
            line-height: .18rem;
        }
        .choseAddress .hasAddress span{
            display: block;
            width: .42rem;
            float: left;
            text-align: left;
            font-size: .14rem;
            color: #999;
        }
        .choseAddress .hasAddress .text{
            width: 2.85rem;
            height: .18rem;
            line-height: .18rem;
            float: left;
            font-size: .16rem;
            color: #333;
        }
        .choseAddress .hasAddress .address_dtl{
            width: 2.85rem;
            height: .4rem;
            line-height: .2rem;
            float: left;
            font-size: .16rem;
            color: #333;
        }
        .choseAddress .hasAddress .gengduo{
            width: .15rem;
            height: 100%;
            margin-top: 0;
            line-height: 1.28rem;
            position: absolute;
            right: .15rem;
            top: 0;
            color: #AAAAAA;
        }
        .choseAddress .bg-deng{
            width:100%;
            height: .02rem;
            background-image: url('../../image/order_detail_bottom.png');
            background-repeat: repeat;
            background-size: 100% 100%;
        }
        .goods_list{
            width: 100%; 
            height: auto; 
            padding: 0 .14rem;
            margin-top: .11rem; 
            background-color: #fff; 
        }
        .goods_list .list{
            width: 100%;
        }
        .goods_list .list .item{
            width: 100%;
            margin-top: .15rem;
            overflow: hidden;
        }
        .goods_list .list .item >.fl{
            width: .74rem;
            height: .74rem;
            border-radius: .02rem;
        }
        .goods_list .list .item >.fr{
            width: 2.62rem;
            height: .89rem;
            padding-bottom: .15rem;
            border-bottom: 1px solid #eee;
        }
        .goods_list .list .item:last-child >.fr{
            border-bottom: 0;
        }
        .goods_list .list .item .fr .desc{
            width: 2.62rem;
            height: .32rem;
            line-height: .16rem;
            font-size: .14rem;
            color: #333;
        }
        .goods_list .list .item .fr .guige{
            width: 100%;
            font-size: .12rem;
            color: #999;
            text-align: left;
        }
        .goods_list .list .item .fr .price{
            width: 100%;
            height: .18rem;
        }
        .goods_list .list .item .fr  .gds_price{
            font-size: .14rem;
            color: #333;
            font-weight: bold;
            line-height: .25rem;
        }
        .goods_list .list .item .fr  .gds_num{
            font-size: .14rem;
            color: #333;
            font-weight: normal;
            line-height: .25rem;
        }
        .goods_list .beizhu{
            width: 100%;
            height: .51rem;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
        }
        .goods_list .beizhu input{
            width: 90%;
            float: left;
            font-size: .12rem;
            color: #333;
        }
        .goods_list .beizhu span{
            float: right;
            font-size: .12rem;
            color: #999999;
        }
        .goods_list .beizhu input ::-moz-placeholder{color:#999;}              
        .goods_list .beizhu input ::-webkit-input-placeholder{color:#999;}     
        .goods_list .beizhu input :-ms-input-placeholder{color:#999;} 
        .goods_list .total{
            width: 100%;
            height: .53rem;
        }
        .goods_list .total span{
            font-size: .12rem;
            color: #333;
        }
        .goods_list .total span i{
            font-style: normal;
        } 
        .goods_list .total .tt_text{
            font-size: .12rem;
            color: #999;
            margin-left: .2rem;
            margin-right: .04rem;
        }
        .goods_list .total .tt_price{
            font-size: .16rem;
            color: #333;
            font-weight: bold;
        }
        .pay-type{
            width: 100%;
            height: auto;
            overflow: hidden;
            margin-top: .1rem;
            padding: 0 .14rem;
            margin-bottom: .2rem;
            background-color: #fff;
        }
        .pay-type .title{
            width: 100%;
            height: .45rem;
            border-bottom: 1px solid #eee;
        }
        .pay-type .title .bg-zi{
            width: .03rem;
            height: .13rem;
        }
        .pay-type .title .text{
            font-size: .16rem;
            color: #333;
            font-weight: bold;
            margin-left: .04rem;
        }
        .pay-type  .item{
            width: 100%;
            height: .46rem;
            margin-top: .2rem;
        }
        .pay-type  .item:last-child{
            margin-bottom: .2rem;
        }
        .pay-type .item .left img{
            width: .45rem;
            height: .45rem;
        }
        .pay-type .item .middle{
            width: 2.63rem;
        }
        .pay-type .item .middle .text{
            font-size: .14rem;
            color: #333;
            margin-bottom: .05rem;
        }
        .pay-type .item .middle .text_info{
            font-size: .12rem;
            color: #999;
            margin-top: .05rem;
        }
        .pay-type .item .right{
            width: .25rem;
            height: .25rem;
            border-radius: 50%;
            border-width: 2px;
            position: relative;
        }
        .pay-type .item .right i{
            display: none;
            font-size: .28rem;
            position: absolute;
            left: -4px;
            top: -5px;
        }
        .pay-type .item .active i{
           display:block;
        }
        .footer_orderAdd{
            width: 100%;
            height: .49rem;
            background-color: #fff;
            position: fixed;
            bottom: 0;
        }
        .footer_orderAdd .left{
            width: 1.91rem;
            height: 100%;
            float: left;
            padding: .14rem;
        }
        .footer_orderAdd span{
            font-size: .1rem;
            color: #333;
        }
        .footer_orderAdd .footer_money{
           font-size: .18rem;
           color: #f5b443;
           margin-left: .04rem;
           position: relative;
           top: -0.01rem;
        }
        .footer_orderAdd .right{
           width: 1.84rem;
           height: .49rem;
           float: right;
           line-height: .49rem;
           text-align: center;
           color: #fff;
           font-weight: bold;
        }
    </style>
    
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">提交订单</h1>
    </header>
    <div class="main">
        <div class="choseAddress">
            <div class="noAddress flex align-items flex_start" style="display:none">
                <span>选择收货地址</span>
                <i class="iconfont icon-gengduo"></i>
            </div>
            <div class="hasAddress" style="display:block">
                <div class="user_name">
                    <span>姓名:</span>
                    <div class="text">张先生</div>
                </div>
                <div class="uset_phone">
                    <span>电话:</span>
                    <div class="text">15688888888</div>
                </div>
                <div class="user_address">
                    <span>地址:</span>
                    <div class="address_dtl ellipsis2">郑州市二七区南三环连云路橄榄城都市广场B座6楼603</div>
                </div>
                <div class="gengduo"><i class="iconfont icon-gengduo"></i></div>
            </div>
            <div class="bg-deng"></div>
        </div>
        <div class="goods_list">
            <div class="list">
                <div class="item">
                    <img class="fl" src="../../image/goods_01.png">
                    <div class="right fr flex flex_wrap align-content-stretch">
                        <div class="desc ellipsis2">五星级酒店专用大牌原液打造真品crajun的香皂 香氛浓郁</div>
                        <div class="guige">套餐二</div>
                        <div class="price">
                            <span class="gds_price fl">￥600</span>
                            <span class="gds_num fr">x1</span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img class="fl" src="../../image/goods_01.png">
                    <div class="right fr flex flex_wrap align-content-stretch">
                        <div class="desc ellipsis2">五星级酒店专用大牌原液打造真品crajun的香皂 香氛浓郁</div>
                        <div class="guige">套餐二</div>
                        <div class="price">
                            <span class="gds_price fl">￥600</span>
                            <span class="gds_num fr">x1</span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img class="fl" src="../../image/goods_01.png">
                    <div class="right fr flex flex_wrap align-content-stretch">
                        <div class="desc ellipsis2">五星级酒店专用大牌原液打造真品crajun的香皂 香氛浓郁</div>
                        <div class="guige">套餐二</div>
                        <div class="price">
                            <span class="gds_price fl">￥600</span>
                            <span class="gds_num fr">x1</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="beizhu flex align-items space-between">
                <input type="text" placeholder="请给商家留言备注">
                <span>*选填</span>
            </div>
            <div class="total flex align-items flex_end">
                <span >共<i class="tt_num">3</i>件商品</span>
                <span class="tt_text">合计:</span>
                <span class="tt_price">￥2000</span>
            </div>
        </div>
        <div class="pay-type">
            <div class="title flex flex_start align-items">
                <div class="bg-zi app-bg-color"></div>
                <div class="text">支付方式</div>
            </div>
            <div class="item flex space-between align-items">
                <div class="left">
                    <img src="../../image/pay_ali.png">
                </div>
                <div class="middle">
                    <div class="text">支付宝支付</div>
                    <div class="text_info">推荐已安装支付宝的用户使用</div>
                </div>
                <div class="right app-border-color active">
                    <i class="iconfont icon-round_check_fill app-font-color"></i>
                </div>
            </div>
            <div class="item flex space-between align-items">
                <div class="left">
                    <img src="../../image/pay_weixin.png">
                </div>
                <div class="middle">
                    <div class="text">微信支付</div>
                    <div class="text_info">推荐已安装微信的用户使用</div>
                </div>
                <div class="right app-border-color">
                    <i class="iconfont icon-round_check_fill app-font-color"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="footer_orderAdd">
        <div class="left flex flex_start align-items">
            <span>合计金额</span>
            <span class="footer_money">￥982</span>
        </div>
        <div class="right app-bg-color">立即下单</div>
    </div>
</body>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script src="../../js/common.js"></script>
<script>
    //@click： 点击支付方式选中
    $('.pay-type .right').click(function(){
        var _this = this
        $('.pay-type .right').each(function(){
            _this == this ? $(this).addClass('active') : $(this).removeClass('active')
        })
    })
    $('.pay-type .item').click(function(){
        var _this = this
        $('.pay-type .item').each(function(){
            _this == this ? $(this).find('.right').addClass('active') : $(this).find('.right').removeClass('active')
        })
    })
</script>
</html>